:root {
    --primary: #000;
    --fprimary: #fff;
    --text-color: #555668;
    --service-text-color: #555668;
    --primary-color: #fff;
    --btn-color: #b8c0c9;
    --btn-active-color: #fff;
    --border-color: #555668;

    --background-color: #060608;
    --background-color1: #0f101a;
    --background-word: #373846;
    --background-input: #252635;
    --background-inputBox: #252635;
    --background-genderBox: #151517;
    --background-btn: #2f313a;
    --background-dropdown: #191a27;
    --background-container: #151517;
    --background-formItem: #181920;
    --background-UploadItem: #252635;
    --background-QuestionItem: #1f2330;

    --background-nav-activeColor: #1f2330;
    --background-nav-color: #b8c0c9;
    --background-nav-color1: #555668;
    --background-Dialog: #0f101a;
    --background-tagBox: #252635;

    --background-tagBox-hover: #303141;
    --background-nav-hover: #293148;
    --background-gender-hover: #252635;
    --background-btn-hover: #4e505e;
    --background-dropdown-hover: #2f313a;
    --background-scrollbar-thumb: #20223b;
    --background-scrollbar-track: #333;
}

[data-theme='light'] {
    --primary: #fff;
    --fprimary: #000;
    --text-color: #afafaf;
    --service-text-color: #909397;
    --primary-color: #2c2c2c;
    --btn-color: #555668;
    --btn-active-color: #333;
    --border-color: #d6d6d6;

    --background-color: #fafafa;
    --background-color1: #f2f2f2;
    --background-word: #e6e6e6;
    --background-input: #f3f3f3;
    --background-inputBox: #f0f0f0;
    --background-genderBox: #f0f0f0;
    --background-btn: #ebebeb;
    --background-dropdown: #f3f3f3;
    --background-container: #f3f3f3;
    --background-formItem: #e8e8e8;
    --background-UploadItem: #e8e8e8;
    --background-QuestionItem: #909397;

    --background-nav-activeColor: #ebebeb;
    --background-nav-color: #000;
    --background-nav-color1: #909397;
    --background-Dialog: #ffffff;
    --background-tagBox: #f0f0f0;

    --background-tagBox-hover: #ffffff;
    --background-word-hover: #d6d6d6;
    --background-nav-hover: #e0e0e0;
    --background-gender-hover: #e0e0e0;
    --background-btn-hover: #e0e0e0;
    --background-dropdown-hover: #e8e8e8;
    --background-scrollbar-thumb: #8a8a8b;
    --background-scrollbar-track: #bebebe;
}

[data-theme='dark'] {
    --primary: #000;
    --fprimary: #fff;
    --text-color: #555668;
    --service-text-color: #555668;
    --primary-color: #fff;
    --btn-color: #b8c0c9;
    --btn-active-color: #fff;
    --border-color: #555668;

    --background-color: #060608;
    --background-color1: #0f101a;
    --background-word: #373846;
    --background-input: #252635;
    --background-inputBox: #252635;
    --background-genderBox: #151517;
    --background-btn: #2f313a;
    --background-dropdown: #191a27;
    --background-container: #151517;
    --background-formItem: #181920;
    --background-UploadItem: #252635;
    --background-QuestionItem: #1f2330;

    --background-nav-activeColor: #1f2330;
    --background-nav-color: #b8c0c9;
    --background-nav-color1: #555668;
    --background-Dialog: #0f101a;
    --background-tagBox: #252635;

    --background-tagBox-hover: #303141;
    --background-word-hover: #494a5c;
    --background-nav-hover: #293148;
    --background-gender-hover: #252635;
    --background-btn-hover: #4e505e;
    --background-dropdown-hover: #282838;
    --background-scrollbar-thumb: #20223b;
    --background-scrollbar-track: #060608;
}
